{% extends 'base.html' %} {% load i18n %} {% block head %}
<style>
  .markdown-content {
    line-height: 1.6;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  }

  .markdown-content h1,
  .markdown-content h2,
  .markdown-content h3 {
    margin-top: 1.5rem;
    margin-bottom: 1rem;
    font-weight: 600;
  }

  .markdown-content h1 {
    font-size: 2rem;
    border-bottom: 1px solid #eaecef;
    padding-bottom: 0.3em;
  }

  .markdown-content h2 {
    font-size: 1.5rem;
    border-bottom: 1px solid #eaecef;
    padding-bottom: 0.3em;
  }

  .markdown-content h3 {
    font-size: 1.25rem;
  }

  .markdown-content p {
    margin-bottom: 1rem;
  }

  .markdown-content ul,
  .markdown-content ol {
    padding-left: 2rem;
    margin-bottom: 1rem;
  }

  .markdown-content li {
    margin-bottom: 0.5rem;
  }

  .markdown-content pre {
    background-color: #f6f8fa;
    padding: 1rem;
    overflow: auto;
    border-radius: 6px;
    margin-bottom: 1rem;
  }

  .markdown-content code {
    background-color: #f6f8fa;
    padding: 0.2em 0.4em;
    border-radius: 3px;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  }

  .markdown-content pre code {
    background-color: transparent;
    padding: 0;
  }

  .markdown-content blockquote {
    border-left: 0.25em solid #dfe2e5;
    padding: 0 1em;
    margin-bottom: 1rem;
    color: #6a737d;
  }

  .markdown-content table {
    border-collapse: collapse;
    margin-bottom: 1rem;
    width: 100%;
  }

  .markdown-content th,
  .markdown-content td {
    padding: 6px 13px;
    border: 1px solid #dfe2e5;
  }

  .markdown-content tr:nth-child(2n) {
    background-color: #f6f8fa;
  }
</style>
{% endblock %} {% block content %}
<div class="max-w-4xl mx-auto">
  <div class="bg-white rounded-lg shadow-md p-6 mb-6">
    <div class="border-b border-gray-200 pb-4 mb-6">
      <h1 class="text-3xl font-bold text-gray-800 mb-2">{{ notebook.title }}</h1>
      <div class="flex flex-wrap items-center gap-4 text-sm text-gray-600">
        <span>
          <i class="far fa-calendar-plus"></i>
          {% translate "Created at" %}: {{ notebook.created_time|date:"Y-m-d H:i" }}
        </span>
        <span>
          <i class="far fa-calendar-check"></i>
          {% translate "Updated at" %}: {{ notebook.updated_time|date:"Y-m-d H:i" }}
        </span>
        <span
          class="px-2 py-1 rounded {% if notebook.state == 0 %}bg-yellow-100 text-yellow-800 {% elif notebook.state == 1 %}bg-green-100 text-green-800 {% elif notebook.state == 2 %}bg-blue-100 text-blue-800 {% else %}bg-gray-100 text-gray-800{% endif %}">
          {{ notebook.get_state_display }}
        </span>
      </div>
    </div>

    <div class="markdown-content">{{ content|safe|linebreaks }}</div>

    <div class="mt-8 pt-6 border-t border-gray-200 flex justify-end">
      <button onclick="window.history.back()" class="px-4 py-2 bg-gray-500 text-white rounded hover:bg-gray-600 transition-colors">
        {% translate "Back" %}
      </button>
    </div>
  </div>
</div>
{% endblock %}
